﻿<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <meta name="renderer" content="webkit">
  <meta name="keywords" content="{$config.keywords}"/>
  <meta name="description" content="{$config.description}"/>
  <title>首页_{$config.site_name}</title>
  <link rel="stylesheet" href="__CDN__/assets/addons/wwh/css/swiper.min.css">
  <link rel="stylesheet" href="__CDN__/assets/addons/wwh/css/style.css">
  <link rel="stylesheet" href="__CDN__/assets/addons/wwh/css/media.css">
  <link rel="stylesheet" href="__CDN__/assets/addons/wwh/css/animate.min.css">
  <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/jquery.min.js"></script>
  <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/index.js"></script>
  <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/swiper.min.js"></script>
  <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/style.js"></script>
  <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/jquery.countup.min.js"></script>
  <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/jquery.waypoints.min.js"></script>
  <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/wow.min.js"></script>
  <link rel="shortcut icon" href="__CDN__/assets/addons/wwh/images/favicon.ico">
</head>
<body>
<!--头部-->
{include file="header" /}
<!--内容-->
<div id="index">
  <!-- Banner -->
  <div class="in1 banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        {volist name="banner" id="v" key="k"}
        <div class="swiper-slide">
          <div class="sbox ">
            <a href="{$v.url}"  class="pimg"><img src="{$v.pc_image|cdnurl}" alt="{$v.title}">
              {if condition="empty($v.video_image) neq false"}<img src="__CDN__/assets/addons/wwh/images/banner_gif.gif" alt="" class="banner_gif">{/if}
            </a>
            <a href="{$v.url}"  class="mimg"><img src="{$v.phone_image|cdnurl}" alt="{$v.title}" ></a>
            {if condition="empty($v.video_image) neq true"}
            <video id="my-video" poster="" autoplay muted class="vidbacking">
              <source src="{$v.video_image|cdnurl}" type="video/mp4">
            </video>
            <div class="txt alltime">
              <div class="tbox">
                <div class="en">{$v.bigfont}<span> {$v.font}</span></div>
                <div class="more">
                  <a href="{$v.url}"><img src="__CDN__/assets/addons/wwh/images/20200911153229.png" alt="{$v.title}" ></a>
                </div>
              </div>
            </div>
            {/if}
          </div>
        </div>
        {/volist}
      </div>
      <div class="swiper-pagination pagination"></div>
      <div class="swiper-button-prev prev"></div>
      <div class="swiper-button-next next"></div>
    </div>
  </div>

  <div class="in2">
    <div class="container">
    <div class="last-product">
      <div class="index-title wow fadeInUp" data-wow-delay="200ms">最新产品</div>
      <div class="items">
        {volist name="product" id="v" key="k"}
        <a class="{if condition='$k eq 1' }item item01{elseif condition='$k eq 6'/}item item02{else /}item{/if} wow fadeInUp" {if condition='$k eq 6' }style="margin: 0 0 1.33%"{/if} href="{:addon_url('wwh/index/archives', [':diyname'=>$navId[$v.column_id]['diyname'], ':id'=>$v.id])}" {if condition='$k eq 1 or $k eq 4' }data-wow-delay="200ms"{/if} {if condition='$k eq 2 or $k eq 5' }data-wow-delay="300ms"{/if} {if condition='$k eq 3 or $k eq 6' }data-wow-delay="400ms"{/if}>
        <div class="pic">
        <img src="{$v.rec_image|cdnurl}" alt="{$v.title}">
        </div>
        <div class="info">
        <p class="t1 over-line1">{$v.title}</p>
        <p class="t2 over-line2">{$v.p_pn}</p>
        </div>
        </a>
        {/volist}
      </div>
    </div>
  </div>
  </div>

  <div class="in3 wow fadeInUp" data-wow-delay="100ms">
    <div class="about-box">
      <div class="info-box">
        <div class="title-box">
          <div class="title wow fadeInUp" data-wow-delay="200ms">{$home.about_title}</div>
          <div class="desc wow fadeInUp" data-wow-delay="300ms">{$home.introduction}</div>
        </div>
        <div class="num-box">
          <div class="item wow fadeInUp" data-wow-delay="400ms">
            <p class="num"> <span>{$home.title1}</span>年</p>
            <div class="tt">
              {$home.description1}
            </div>
          </div>
          <div class="item wow fadeInUp" data-wow-delay="500ms">
            <p class="num"> <span>{$home.title2}</span>强</p>
            <div class="tt">
              {$home.description2}
            </div>
          </div>
          <div class="item wow fadeInUp" data-wow-delay="600ms">
            <p class="num"> <span>{$home.title3}</span>个</p>
            <div class="tt">
              {$home.description3}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="in4">
  <div class="wel-news container">
    <div class="wel-news-title wow fadeInUp" data-wow-delay="200ms">
      新闻中心
      <a href="{:addon_url('wwh/index/column', [':diyname'=>'news'])}">查看更多<span></span></a>
    </div>
    <div class="wel-news-list">
      <div class="container">
        <div class="row f-cb">
          {volist name="news" id="v" mod="4"}
          {eq name="mod" value="0"}
          <div class="wt25 news01 wnews wow fadeInLeft" data-wow-delay="600ms">
            <a href="{:addon_url('wwh/index/archives', [':diyname'=>$navId[$v.column_id]['diyname'], ':id'=>$v.id])}" style="background:url(__CDN__/assets/addons/wwh/images/20200911153308.jpg ) no-repeat center;">
              <h3>{$v.time}</h3>
              <h2>{$v.title}</h2>
            </a>
          </div>
          {/eq}

          {eq name="mod" value="1"}
          <div class="wt50 news02 wnews wow fadeInRight" data-wow-delay="600ms">
            <a href="{:addon_url('wwh/index/archives', [':diyname'=>$navId[$v.column_id]['diyname'], ':id'=>$v.id])}" style="background:url(__CDN__/assets/addons/wwh/images/20200911153343.jpg ) no-repeat center;">
              <h3>{$v.time}</h3>
              <h2>{$v.title}</h2>
              <br>
              <br>
              <p class="content">{$v.content|strip_tags|mb_substr=0,30,'utf-8'}...</p>
              <p class="more">查看详情 +</p>
            </a>
          </div>
          {/eq}

          {eq name="mod" value="2"}
          <div class="wt25 news03 wnews wow fadeInUp" data-wow-delay="700ms">
            <a href="{:addon_url('wwh/index/archives', [':diyname'=>$navId[$v.column_id]['diyname'], ':id'=>$v.id])}" style="background:#0f6ab4;">
              <h3>{$v.time}</h3>
              <h2>{$v.title}</h2>
            </a>
            {/eq}

            {eq name="mod" value="3"}
            <a href="{:addon_url('wwh/index/archives', [':diyname'=>$navId[$v.column_id]['diyname'], ':id'=>$v.id])}" style="background:url(__CDN__/assets/addons/wwh/images/20200911153417.jpg ) no-repeat center;">
              <h3>{$v.time}</h3>
              <h2>{$v.title}</h2>
            </a>
          </div>{/eq}
          {/volist}
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<!--底部-->
{include file="footer" /}
<script type="text/javascript">
  /*首页Banner*/
  var width=$(window).width();

  // 获取第一个视频时长
  $(".banner .swiper-slide").each(function(){
    if($(this).has('video').length){
      $(this).find('video').attr('id','video');
      return false;
    }
  });

  var audioE2  = document.getElementById("video");
  // 如果swiper有视频
  if(audioE2){
    // 上传了视频,等待视频加载完
    audioE2 .onloadedmetadata = function() {
      var tol=audioE2.duration;
      // tol=tol*1000;
      var banner_swiper = new Swiper('.banner .swiper-container',{
        speed:1000,
        loop:true,
        // autoplay:false,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        navigation: {
          nextEl: '.banner .swiper-button-next',
          prevEl: '.banner .swiper-button-prev',
        },
        pagination: {
          el: '.banner .swiper-pagination',
          clickable: true,
        },
        on: {
          init: function(){
            $('.banner .swiper-slide').eq(this.activeIndex).find('.text').addClass('active');
          },
          slideChangeTransitionStart: function(){
            $('.banner .swiper-slide').find('.text').removeClass('active').eq(this.activeIndex).addClass('active').siblings();
            var _target = this;
            var curVideo = this.$el.find(".swiper-slide-active").find("video");
            // tol=curVideo.duration;
            //暂停所有视频
            function pauseAll(ele){
              ele.find("video").each(function(){
                $(this)[0].pause();
              });
            }
            pauseAll(this.$el);
            //轮播间隔时间
            console.log(tol)
            _target.params.autoplay.delay = tol*1000;
            //判断当前激活元素是否有视频
            if(curVideo.length > 0){
              console.log("有视频！");
              this.autoplay.stop();
              curVideo[0].currentTime = 0;
              curVideo[0].play();
              curVideo[0].removeEventListener('ended', function (){}, false);
              curVideo[0].addEventListener('ended', function (){
                if($('.banner .sign').hasClass('active')){
                  // 此时是暂停状态
                }else{
                  _target.slideNext();
                }

              }, false);
            }else{
              console.log("无视频！");
              _target.params.autoplay.delay=5000;
              _target.autoplay.start();
              $('.banner .sign').removeClass('active');
              flag=true;
            }

          },
        },
      });
    }
  }else{
    // 没上传视频
    var banner_swiper = new Swiper('.banner .swiper-container',{
      speed:1000,
      loop:true,
      // autoplay:false,
      autoplay: {
        delay: 5000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: '.banner .swiper-button-next',
        prevEl: '.banner .swiper-button-prev',
      },
      pagination: {
        el: '.banner .swiper-pagination',
        clickable: true,
      },
      on: {
        init: function(){
          $('.banner .swiper-slide').eq(this.activeIndex).find('.text').addClass('active');
        },
        slideChangeTransitionStart: function(){
          $('.banner .swiper-slide').find('.text').removeClass('active').eq(this.activeIndex).addClass('active').siblings();
        },
      },
    });
  }
</script>
<script type="text/javascript">
    /*数字滚动*/
    new WOW().init();
    $('.num-box .item .num span ').countUp({
        delay: 10,
        time: 1000
    });
</script>
</body>
</html>
